<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
  <style>
    *{margin:0;padding:0;border:0;}
#fm { line-height: 24px; list-style-type: none; background:#666; }/*设置盒子的行高，去掉标记，设置背景颜色*/
#fm a { display: block; width: 80px; text-align:center; }/*设置A标签为块元素不显示，宽度，居中*/
#fm a:link { color:#666; text-decoration:none; } /* 设置未访问的链接样式*/
#fm a:visited { color:#666;text-decoration:none; } /* 设置已访问的链接样式 */
#fm a:hover { color:#FFF;text-decoration:none;font-weight:bold; }  /* 当有鼠标悬停在链接上的颜色 */
#fm li { float: left; width: 150px; background:#CCC; }
#fm li a:hover{ background:#999; }
#fm li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; }
#fm li ul li{ float: left; width: 80px; background: #F6F6F6; } 
#fm li ul a{ display: block; width: 80px;width: 80px;text-align:left;padding-left:5px; } 
#fm li ul a:link { color:#666; text-decoration:none; } 
#fm li ul a:visited { color:#666;text-decoration:none; } 
#fm li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } 
#fm li:hover ul { left: auto; } 
#fm li.sfhover ul { left: auto; } 
#content { clear: left; } 
  </style>
</head>
<body>
  <UL id=fm> 
    <LI><A href="#">一级菜单栏目</A> 
    <UL> 
    <LI><A href="#">一级菜单目录</A></LI> 
    <LI><A href="#">一级菜单目录</A></LI> 
    <LI><A href="#">一级菜单目录</A></LI> 
    <LI><A href="#">一级菜单目录</A></LI></UL>
    </LI> 
    <LI><A href="#">二级菜单栏目</A> 
    <UL> 
    <LI><A href="#">二级菜单目录</A></LI> 
    <LI><A href="#">二级菜单目录</A></LI> 
    <LI><A href="#">二级菜单目录</A></LI> 
    <LI><A href="#">二级菜单目录</A></LI> 
    <LI><A href="#">二级菜单目录</A></LI></UL></LI> 
    <LI><A href="#">三级菜单栏目</A> 
    <UL> 
    <LI><A href="#">三级菜单目录</A></LI> 
    <LI><A href="#">三级菜单目录</A></LI> 
    <LI><A href="#">三级菜单目录</A></LI> 
    <LI><A href="#">三级菜单目录</A></LI>
    </UL></LI> 
    <LI><A href="#">四级菜单栏目</A> 
    <UL> 
    <LI><A href="#">四级菜单目录</A></LI> 
    <LI><A href="#">四级菜单目录</A></LI> 
    <LI><A href="#">四级菜单目录</A></LI> 
    <LI><A href="#">四级菜单目录</A></LI></UL></LI> 
    </UL></LI></UL>
    <SCRIPT type=text/javascript>
      function menuFix() { 
      var sfEls = document.getElementById("fm").getElementsByTagName("li"); 
      for (var i=0; i<sfEls.length; i++) { 
      sfEls[i].onmouseover=function() { 
      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
      } 
      sfEls[i].onMouseDown=function() { 
      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
      } 
      sfEls[i].onMouseUp=function() { 
      this.className+=(this.className.length>0? " ": "") + "sfhover"; 
      } 
      sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
      ""); 
      } 
      } 
      } 
      window.onload=menuFix; 
      </SCRIPT>
</body>
</html>